<template>
  <div class="forgot-password-container">
    <van-nav-bar
        title="忘记密码"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
    />
    <div class="forgot-password-form">
      <img src="@/assets/学校logo.png" alt="学校 Logo" class="school-logo" />
      <h1 class="title">重置密码</h1>
      <van-field v-model="username" placeholder="请输入学号或者职工号" left-icon="contact" />
      <van-field v-model="email" placeholder="请输入邮箱" left-icon="email" />
      <div class="verification-container">
        <van-field v-model="verificationCode" placeholder="请输入验证码" />
        <van-button class="send-code-button" type="info" @click="sendCode" :loading="isSending">发送验证码</van-button>
      </div>
      <van-field v-model="newPassword" type="password" placeholder="请输入新密码" left-icon="lock" />
      <van-field v-model="confirmPassword" type="password" placeholder="确认新密码" left-icon="lock" />
      <van-button type="primary" block @click="resetPassword">重置密码</van-button>
      <span class="login-link" @click="goToLogin">返回登录</span>
    </div>
    <van-toast v-if="toastMessage" :message="toastMessage" :type="toastTheme" />
  </div>
</template>

<script setup>
import { ref, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';
import { showToast } from 'vant';

const router = useRouter();
const username = ref('');
const email = ref('');
const verificationCode = ref('');
const newPassword = ref('');
const confirmPassword = ref('');
const isSending = ref(false);
const toastMessage = ref('');
const toastTheme = ref('info');
const countdown = ref(0);
let countdownInterval = null;

const onClickLeft = () => {
  router.back(); // 返回上一页
};

const sendCode = async () => {
  if (!username.value || !email.value) {
    showToast('请输入用户名和邮箱');
    return;
  }

  if (countdown.value > 0) {
    showToast('请等待倒计时结束后再发送验证码');
    return;
  }

  isSending.value = true;
  try {
    const response = await axios.post('http://localhost:8000/users/forgot-password', {
      username: username.value,
      email: email.value
    });

    showToast(response.data.message);

    if (response.data.message.includes('成功')) {
      startCountdown();
    }
  } catch (error) {
    console.error('发送验证码失败:', error);
    showToast('发送验证码失败，请重试');
  } finally {
    isSending.value = false;
  }
};

const resetPassword = async () => {
  if (!username.value || !verificationCode.value || !newPassword.value || !confirmPassword.value) {
    showToast('请输入所有必填项');
    return;
  }

  if (newPassword.value !== confirmPassword.value) {
    showToast('新密码与确认密码不匹配');
    return;
  }

  try {
    const response = await axios.post('http://localhost:8000/users/reset-password', {
      username: username.value,
      newPassword: newPassword.value
    });

    showToast(response.data.message);
  } catch (error) {
    console.error('重置密码失败:', error);
    showToast('重置密码失败，请重试');
  }
};

const startCountdown = () => {
  countdown.value = 60;
  countdownInterval = setInterval(() => {
    countdown.value--;
    if (countdown.value <= 0) {
      clearInterval(countdownInterval);
    }
  }, 1000);
};

const goToLogin = () => {
  router.push('/student');
};

// 清理倒计时定时器
onUnmounted(() => {
  if (countdownInterval) {
    clearInterval(countdownInterval);
  }
});
</script>

<style scoped>
.forgot-password-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f7f8fa;
}

.forgot-password-form {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 20px;
  margin-top: 20px;
}

.school-logo {
  width: 250px; /* 调整 Logo 图片的宽度 */
  margin-bottom: 100px; /* 调整间距 */
}

.title {
  font-family: 'Roboto', sans-serif; /* 使用 Google Fonts 提供的字体 */
  font-size: 24px;
  font-weight: 700; /* 加粗标题文字 */
  color: #333;
  margin-bottom: 20px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* 添加文字阴影 */
  letter-spacing: 0.5px; /* 调整字母间距 */
}

.van-field {
  margin-bottom: 10px;
  width: 100%;
}

.verification-container {
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 10px;
}

.send-code-button {
  background-color: #409eff; /* 设置按钮背景色 */
  border-color: #409eff; /* 设置按钮边框色 */
  color: #ffffff; /* 设置按钮文本颜色 */
}

.login-link {
  color: #409eff;
  font-size: 14px;
  cursor: pointer;
  margin-top: 10px;
}
</style>
